<script setup lang="ts">
import { ref } from "vue";

let showDatePicker = ref(false);
let productType = ref(["类型一", "类型二", "类型三"]);
let productState = ref(["自制", "委外", "外购", "其他"]);
let productClassify = ref(["分类一", "分类二", "分类三"]);
let tableData = ref([{}]);
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);

const handler = (page) => {
  currentPage.value = page;
};
const sizeHandler = (page_size) => {
  pageSize.value = page_size;
};
</script>

<template>
  <div style="padding: 20px">
    <el-card>
      <div class="operateContainer">
        <div
          class="formContainer"
          :style="showDatePicker ? 'height:85px' : 'height:32px'"
        >
          <el-form inline>
            <el-form-item>
              <el-input placeholder="请输入物料编号/名称">
                style="width: 250px"
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-select placeholder="请选择物料类型" style="width: 176px">
                <el-option
                  v-for="item in productType"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select placeholder="请选择物料属性" style="width: 176px">
                <el-option
                  v-for="item in productState"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select placeholder="请选择物料分类" style="width: 176px">
                <el-option
                  v-for="item in productClassify"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <div style="margin-top: 20px">
              <el-form-item>
                <el-input placeholder="请输入库存上限">
                  style="width: 250px"
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入库存下限">
                  style="width: 250px"
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入当前库存">
                  style="width: 250px"
                </el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="searchOperate">
          <div class="button">
            <el-button type="primary" plain style="width: 80px">
              重置
            </el-button>
            <el-button type="primary" style="width: 80px"> 查询 </el-button>
          </div>
          <div class="more">
            <el-button
              type="primary"
              link
              @click="showDatePicker = !showDatePicker"
            >
              更多
            </el-button>
            <el-icon color="#1B9AEE" :class="{ 'rotate-180': showDatePicker }">
              <CaretBottom />
            </el-icon>
          </div>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <template #header>
        <span style="font-weight: bold"> 物料库存 </span>
      </template>
      <div class="operate">
        <el-button style="width: 80px" type="primary" plain> 导出 </el-button>
      </div>
      <el-table :data="tableData" style="margin-top: 15px" border>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          fixed="left"
          width="60"
        >
        </el-table-column>
        <el-table-column align="center" label="物料编号" fixed="left">
        </el-table-column>
        <el-table-column align="center" label="物料名称" fixed="left">
        </el-table-column>
        <el-table-column align="center" label="规格型号"> </el-table-column>
        <el-table-column align="center" label="单位"> </el-table-column>
        <el-table-column align="center" label="物料类型"> </el-table-column>
        <el-table-column align="center" label="物料属性"> </el-table-column>
        <el-table-column align="center" label="物料分类"> </el-table-column>
        <el-table-column align="center" label="当前库存"> </el-table-column>
        <el-table-column align="center" label="库存上限"> </el-table-column>
        <el-table-column align="center" label="库存下限"> </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout="prev,,pager,next,jumper,->,sizes,total"
        :total="total"
        @current-change="handler"
        @size-change="sizeHandler"
        style="margin-top: 10px"
      ></el-pagination>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.operateContainer {
  display: flex;
  align-content: center;
  justify-content: space-between;
  .formContainer {
    width: 1060px;
    height: 32px;
    transition: height 0.3s ease; // 添加高度变化的过渡效果
    overflow: hidden; // 防止内容溢出
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .searchOperate {
    display: flex;
    align-items: center;
    .more {
      margin-left: 20px;
      display: flex;
      align-items: center;
    }
  }
}

/* 定义旋转动画 */
.rotate-180 {
  transition: transform 0.3s ease;
  transform: rotate(180deg);
}
</style>
